<template>
  <div class="flex flex-col text-white relative h-[700px]">
    <div class="absolute z-10 top-0 left-0 right-0 text-center pt-28">
      <ArtopgroupScrollFadeIn>
        <div class="text-2xl mb-4">{{ title }}</div>
        <div class="text-2xl xl:w-64 m-auto">{{ subTitle }}</div>
        <div class="h-20 flex flex-col justify-center items-center">
          <div class="h-2 bg-red-600 w-1/4"></div>
        </div>
        <p class="px-6">{{ content }}</p>
      </ArtopgroupScrollFadeIn>
    </div>
    <video
      class="flex-1 h-0 object-fill w-full"
      preload="auto"
      loop
      autoplay
      muted
      playsinline
      x-webkit-airplay="allow"
      x5-video-player-type="h5"
    >
      <source type="video/mp4" :src="bgVideoSrc" />
      <source type="video/ogg" :src="bgVideoSrc" />
      <source type="video/webm" :src="bgVideoSrc" />
    </video>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  title: string;
  subTitle: string;
  content: string;
  bgVideoSrc: string;
}>();
</script>

<style scoped></style>
